<template>
    <div>
        <el-form ref="form" status-icon :rules="rules" :model="loginForm" class="login-box" label-width="80px">
            <el-form-item type="email" label="用户名" prop="userName">
                <el-input placeholder="注册邮箱" v-model="loginForm.userName"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input placeholder="密码" type="password" v-model="loginForm.password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary"class="login-box-btn" @click="onSubmit">登录</el-button>
            </el-form-item>
        </el-form>
    </div>

</template>

<script>
    import userService from '../biz/api/userService'

    export default {
        data () {
            return {
                loginForm:{
                    userName: '',
                    password: '',
                },
                rules: {
                    userName: [
                        { validator: (rule, value, callback)=>{
                            if (value === '') {
                                callback(new Error('请填写用户名'));
                            } else {
                                callback();
                            }
                        }, trigger: 'blur' },
                        { pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/ ,message: '邮箱格式不正确', trigger: 'blur' },
                    ],
                    password: [
                        { validator: (rule, value, callback)=>{
                            if (value === '') {
                                callback(new Error('请填写密码'));
                            } else {
                                callback();
                            }
                        }, trigger: 'blur' },
                        { pattern: /^[a-zA-Z0-9]{6,20}$/ ,message: '密码格式错误，必须是6-20位数字或字母', trigger: 'blur' },
                    ]
                }
            }
        },
        methods: {
            onSubmit(){
                this.$refs.form.validate(async (valid) => {
                    if (valid) {
                        try{
                            await userService.login(this.loginForm.userName, this.loginForm.password)
                            //登录成功红后，跳转首页
                            this.$router.replace(this.$route.query.redirect || '/')
                        } catch (e){
                            this.$handleError(e, '登录失败')
                        }
                    } else {
                        return false;
                    }
                });
            }
        },
        computed: {
        },
        async mounted(){
            window.t=  this
        }
    }
</script>

<style scoped>
    .login-box{
        position: absolute;
        width: 100%;
        max-width: 300px;
        height: 200px;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        margin: auto;
    }
    .login-box-btn{
        width: 100%;
    }
</style>
